<template>
  <div>
    <form-dialog ref="formDrawerRef" title="审核进度" top="2vh" width="90%" :isButton="false">
      <template #header>
        <div>
          <span class="text-[18px]">审核进度</span><span class="ml-2 text-[var(--el-color-primary)]">双击查看详情</span>
        </div>
      </template>
      <div class="dialog-body">
        <el-table :data="tableData" border :header-cell-style="{ color: '#fff', backgroundColor: '#409EFF' }"
          @row-dblclick="handleRowClick">
          <el-table-column type="index" width="80" label="序号" align="center" />
          <el-table-column prop="verificationMaterialName" label="证件" width="320" align="center" />
          <el-table-column prop="createTime" label="上传日期" width="120" align="center" />
          <el-table-column prop="department" label="审核部门" width="180" align="center" />
          <el-table-column prop="verificationApprover" label="审核人员" width="120" align="center" />
          <el-table-column prop="approvalPersonnelPhone" label="审核人电话" width="120" align="center" />
          <el-table-column prop="approvalOpinion" label="审核意见" align="center" />
          <el-table-column prop="pushStatus" label="证件审核状态" width="120" align="center">
            <template #default="scope">
              <span v-if="scope.row.pushStatus == 0">审核中</span>
              <span v-if="scope.row.pushStatus == 1">审核成功</span>
              <span v-if="scope.row.pushStatus == 2">审核失败</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <form-dialog ref="detailRef" title="审核详情" :appendToBody="true" top="2vh" width="80%" :isButton="false" >
        <div class="dialog-detail" style="width:60%;margin: 0 auto;">
          <el-divider content-position="left">材料</el-divider>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="材料类型" align="center" class-name="my-content" label-class-name="my-label">{{
              formDialogMaterials.verificationMaterialName }}</el-descriptions-item>
            <el-descriptions-item label="上传日期" align="center" class-name="my-content" label-class-name="my-label">{{
              formDialogMaterials.uploadTime }}</el-descriptions-item>
            <el-descriptions-item label="起保日期" align="center" class-name="my-content"
              label-class-name="my-label">{{ dataValue.startCoverageTime }}</el-descriptions-item>
            <el-descriptions-item label="终保日期" align="center" class-name="my-content"
              label-class-name="my-label">{{ dataValue.endCoverageTime }}</el-descriptions-item>
            <!-- <el-descriptions-item label="投保险种" align="center" class-name="my-content"
              label-class-name="my-label">{{formDialogRecord.coverageType}}</el-descriptions-item> -->
            <el-descriptions-item label="投保险种" align="center" class-name="my-content" label-class-name="my-label">
             <span v-if="formDialogRecord.coverageType === '0'">营业性</span>
              <span v-else-if="formDialogRecord.coverageType === '1'">非营业性</span>
            </el-descriptions-item>
            <el-descriptions-item label="是否有效保单" align="center" class-name="my-content" label-class-name="my-label">
              <span>{{ formDialogRecord.isValid === 0 ? '否' : '是' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="是否安装视频监控设备" align="center" class-name="my-content" label-class-name="my-label">
              <span>{{ dataValue.isInstallVideo === 0 ? '否' : '是' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="GPS 最后上线时间" align="center" class-name="my-content"
              label-class-name="my-label">{{
                dataValue.gpsLoginTime }}

            </el-descriptions-item>
            <el-descriptions-item label="最后一年是否上线" align="center" class-name="my-content" label-class-name="my-label">
              <span>{{ dataValue.isOnlineYear === 0 ? '否' : '是' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="图片" align="center" label-class-name="my-label">
              <el-image style="width: 100px; height: 100px" :src="formDialogMaterials.photo" :zoom-rate="1.2"
                :max-scale="7" :min-scale="0.2" :preview-src-list="[
                  formDialogMaterials.photo
                ]" :initial-index="4" fit="cover" />
            </el-descriptions-item>
          </el-descriptions>
          <el-divider content-position="left">审核</el-divider>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="审核状态" align="center" class-name="my-content" label-class-name="my-label">
              <!-- <span v-if="formDialogMaterials.pushStatus == 0">审核中</span>
              <span v-if="formDialogMaterials.pushStatus == 1">审核成功</span>
              <span v-if="formDialogMaterials.pushStatus == 2">审核失败</span> -->
            {{ reviewStatusText }}
            </el-descriptions-item>

            <el-descriptions-item label="审核部门" align="center" class-name="my-content" label-class-name="my-label">{{
              formDialogMaterials.department }}</el-descriptions-item>
            <el-descriptions-item label="审核人" align="center" class-name="my-content" label-class-name="my-label">{{
              formDialogMaterials.verificationApprover }}</el-descriptions-item>
            <el-descriptions-item label="审核时间" align="center" class-name="my-content" label-class-name="my-label">{{
              formDialogMaterials.signTime }}</el-descriptions-item>
            <el-descriptions-item label="不通过意见"  align="left" class-name="my-content" label-class-name="my-label" >{{
              formDialogMaterials.approvalOpinion }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <template #footer>
          <div class="flex justify-center">
            <el-button type="primary" @click="handlePrevious">上一条</el-button>
            <el-button type="primary" @click="handleNext">下一条</el-button>
          </div>
        </template>
      </form-dialog>
    </form-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref,computed } from "vue";
import FormDialog from "@/components/FormDialog.vue";
import { getViewAnnualReviewProgress, getAnualVerificationMaterials } from "@/api/annualAudit";

const tableData: any = ref([]);
const formDrawerRef: any = ref();
const dataValue: any = ref({});
const currentRow: any = ref({});

// 审核状态
const reviewStatusText = computed(() => {
  switch (formDialogMaterials.value.pushStatus) {
    case 0:
      return '审核中';
    case 1:
      return '审核成功';
    case 2:
      return '审核失败';
    default:
      return '';
  }
});
const handleOpen = (val: any) => {
  // 使用dataValue变量保存年审记录页面点击的数据
  dataValue.value = val;
  //console.log(val);
  // 取得年审记录里面的编号和审核状态传递给请求接口 获取资料数据
  getViewAnnualReviewProgress(val.acceptanceId, "-1").then((res) => {
    tableData.value = res;
  });
  formDrawerRef.value.open();
};
const formDialogRecord: any = ref({});
const formDialogMaterials: any = ref({});
const handleRowClick = (row: any) => {
  console.log(row);
  currentRow.value = row;
  //console.log(currentRow.value.id, currentRow.value)
  getAnualVerificationMaterials(currentRow.value.id).then((res: any) => {

    //formDialogDataRes.value = res;

    //审核信息
    formDialogMaterials.value = res.materials;
    //审核材料信息
    formDialogRecord.value = res.record;

  });
  handleDetail(row);
};
const detailRef = ref();
const handleDetail = (row: any) => {
  detailRef.value.open(row);
};
// 上一条
const handlePrevious = () => {
  const index = tableData.value.findIndex((item: any) => item.id === currentRow.value.id)
  currentRow.value = tableData.value[index - 1 < 0 ? 0 : index - 1];
  handleRowClick(currentRow.value)
};
// 下一条
const handleNext = () => {
  const index = tableData.value.findIndex((item: any) => item.id === currentRow.value.id)
  currentRow.value = tableData.value[index + 1 >= tableData.value.length ? tableData.value.length - 1 : index + 1];
  handleRowClick(currentRow.value)
};
// defineExpose是Vue提供的组件通信方式，用于向父组件暴露方法，让父组件调用。
// 这里暴露了一个handleOpen方法，用于打开表单弹框，并传递数据
defineExpose({
  handleOpen
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-detail {
  height: calc(100vh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.cell) {
  font-weight: 700;
}

:deep(.el-table__row .cell) {
  cursor: pointer;
}

:deep(.my-label) {
  font-weight: 700 !important;
}

:deep(.my-content) {
  width: 40% !important;
  font-weight: 700 !important;
}
</style>
